<template>
	<scroll-view @scrolltolower="handleTolower" class="recommend_view" scroll-y v-if="recommends.length>0">
        <view class="recommend_wrap">
			<navigator class="recommend_item"
			v-for="item in recommends"
			:key="item.id"
			:url="`/pages/album/index?id=${item.target}`"
			>
			<image mode="widthFix" :src="item.thumb"></image>
			</navigator>
		</view>

		<view class="monthes_wrap">
			<view class="monthes_title">
				<view class="monthes_title_info">
					<view class="monthes_info">
						<text>{{monthes.DD}} / </text>
						{{monthes.MM}} 月
					</view>
					<view class="monthes_text">{{monthes.title}}</view>
				</view>
				<view class="monthes_title_more">更多 ></view>
			</view>
			<view class="monthes_content">
				<view class="monthes_item"
				v-for="(item,index) in monthes.items"
				:key="item.id">
				<go-detail :list="monthes.items" :index="index">
					<image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>	
				</go-detail>
					
				</view>
			</view>
		</view>

		<view class="hots_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view class="hots_item"
				v-for="(item,index) in hots"
				:key="item.id"
				>
				<go-detail :list="hots" :index="index">
				<image mode="widthFix" :src="item.thumb"></image>
				</go-detail>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
 
<script>

import moment from "moment"
import goDetail from "@/components/goDetail"

	export default {
		components:{
			goDetail
		},
		data(){
			return{
				recommends:[],
				monthes:{},
				hots:[],
				params:{
					//要获取30条
					limit:30,
					//关键字
					order:"hot",
					//要跳过几条
					skip:0
				},
				hasMore:true
			}
		},
		mounted(){
			this.getList();
		},
		methods:{
			//获取接口数据
			getList(){
				this.request({
				url: 'http://service.picasso.adesk.com/v3/homepage/vertical',
				data:this.params,
			})
			.then(result=>{
				if(result.res.vertical.length === 0){
					this.hasMore = false;
					uni.showToast({
						title: '没有更多数据了哦~',
						icon: 'none',
						});
					return;
				}
				if(this.recommends.length === 0){
					this.recommends = result.res.homepage[1].items;

				this.monthes = result.res.homepage[2];

				this.monthes.MM=moment(this.monthes.stime).format("MM");
				this.monthes.DD=moment(this.monthes.stime).format("DD");
				}
				
				//拼接数据es6方法
				this.hots = [...this.hots,...result.res.vertical];
				
				
			})
			},
			//触底事件
			handleTolower(){
				// console.log("到底啦");
				if(this.hasMore){
				this.params.skip += this.params.limit;
				this.getList();
				}else{
					uni.showToast({
						title:'已经尽力了喔',
						icon:'none'
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_view{
		height: calc(100vh - 36px);
	}
	.recommend_wrap{
		display: flex;
		flex-wrap: wrap;
		.recommend_item{
			width: 50%;
			border: 5rpx solid #fff;
		}
	}
	.monthes_wrap {
		.monthes_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			.monthes_title_info {
				color: $color;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
			.monthes_info {
				text {
					font-size: 36rpx;
				}
			}

			.monthes_text {
				font-size: 34rpx;
				color: #666;
				margin-left: 30rpx;
			}
			}

			.monthes_title_more {
				font-size: 24rpx;
				color: $color;

			}
		}

		.monthes_content {
			display: flex;
			flex-wrap: wrap;
			.monthes_item{
				width: 33.33%;
				border: 5rpx solid #fff;
			}

		}
	}
	.hots_wrap {
  		.hots_title {
			  padding: 20rpx;
			text {
				padding-left: 20rpx;
				border-left: 20rpx solid $color;
				font-size: 34rpx;
				font-weight: 600;
			}
		}

  		.hots_content {
			  display: flex;
			  flex-wrap: wrap;
			.hots_item {
				width: 33.33%;
				border: 5rpx solid #fff;
				image {

				}
			}
  		}
}
</style> 